import React, { PureComponent } from 'react'
import {
  BrowserRouter,
  NavLink,
  Route,
  Routes,
  Outlet,
  useRoutes
} from 'react-router-dom'

import routes from './router'
import './App.css'

function RenderRoutes() {
  const element = useRoutes(routes)
  return element
}
export default class App extends PureComponent {
  render() {
    const id = 'abc'
    return (
      <div>
        <BrowserRouter>
          <NavLink
            to="/"
            style={({ isActive }) => {
              return {
                color: isActive ? 'red' : ''
              }
            }}
          >
            首页
          </NavLink>
          <NavLink
            to="/about"
            style={({ isActive }) => {
              return {
                color: isActive ? 'red' : ''
              }
            }}
          >
            关于
          </NavLink>
          <NavLink
            to="/profile"
            style={({ isActive }) => {
              return {
                color: isActive ? 'red' : ''
              }
            }}
          >
            我的
          </NavLink>
          <NavLink
            to="/user"
            style={({ isActive }) => {
              return {
                color: isActive ? 'red' : '',
                fontSize: '50px'
              }
            }}
          >
            用户
          </NavLink>
          <NavLink
            to="/login"
            style={({ isActive }) => {
              return {
                color: isActive ? 'red' : '',
                fontSize: '50px'
              }
            }}
          >
            登录
          </NavLink>
          <NavLink
            to={`/detail/${id}`}
            style={({ isActive }) => {
              return {
                color: isActive ? 'red' : '',
                fontSize: '50px'
              }
            }}
          >
            详情
          </NavLink>

          {/* <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="about" element={<About />}>
              <Route path="" element={<h2>企业历史</h2>} />
              <Route path="culture" element={<h2>企业文化</h2>} />
              <Route path="contact" element={<h2>联系我们</h2>} />
            </Route>
            <Route path="/profile" element={<Profile />} />
            <Route path="/user" element={<User />} />
            <Route path="/login" element={<Login />} />
            <Route path="/detail/:id" element={<Detail />} />
          </Routes> */}
          <RenderRoutes />
        </BrowserRouter>
      </div>
    )
  }
}
